<template>
  <page-lr class="page-air-quality-calendar">
    <div class="flex-block" slot="content-left">
      <el-row class="list-year" :gutter="20" v-if="list.length > 0">
        <el-col v-for="item in list.length" :key="item" :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
          <el-calendar :value="searchForm.year + '-' + item">
            <template
              slot="dateCell"
              slot-scope="{date, data}">
              <p :class="'item-'+ getClass(data.day,item).typeId">              
                <el-popover
                  placement="top"
                  width="160"
                  trigger="hover">
                  <div v-for="(li,index) in getTips(data.day,item)" :key="index">{{li.label + '：' + li.value}}</div>
                  <span slot="reference">{{data.day.split('-')[2]}}</span>
                </el-popover>
              </p>
            </template>
          </el-calendar>
          <el-row class="list-type">
            <el-col :xs="24" :sm="8" v-for="(type,index) in typeList" :key="index">
              <span :class="'dot dot-'+type.id">{{type.name.substring(0,2)}}</span>
              <b class="total">{{getTotal(type.name,item)}}</b>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <div class="legend-box" v-if="!loading">
        <h2>{{ legend.type }}</h2>
        <div v-for="(item,index) in legend.typeList" :key="index" :class="'item item-'+item.id">
            <div class="name">{{ item.name.substring(0,2) }}</div>
            <div :class="'column column-'+item.id"></div>
            <div class="value">{{ item.value }}</div>
        </div>
      </div>
    </div>
    <el-form size="small" :model="searchForm" label-width="90px" slot="content-right">
      <el-form-item label="年份：">
        <el-date-picker v-model="searchForm.year" type="year" value-format="yyyy" placeholder="选择年" @change="changeYear" style="width:100%"></el-date-picker>
      </el-form-item>
      <el-form-item label="污染指标：">
        <el-button v-for="(item,index) in legend.list" :key="index" size="small" :type="legend.type == item.name ? 'primary' : 'default'" @click="changeType(item.name)">
          {{ item.name }}
        </el-button>
      </el-form-item>
    </el-form>
  </page-lr>
</template>
<script>
import {city} from '@/config/env'

export default {
  data() {
    return {
      loading: true,
      isSearch: true,
      searchForm:{
        city_name: city,
        start: '',
        end: '',
        rec_num: 9999,
        year: '2022',
      },
      list: [],
      typeList:[
        {id:1,name: '优', value: 0, },
        {id:2,name: '良', value: 0, },
        {id:3,name: '轻度污染', value: 0, },
        {id:4,name: '中度污染', value: 0, },
        {id:5,name: '重度污染', value: 0, },
        {id:6,name: '严重污染', value: 0, },
      ],
      legend:{
        type: 'AQI',
        typeId: 'aqi',
        index: 0,
        list:[
          {id: 'aqi', name: 'AQI', values: [0,50,100,150,200,300]},
          {id: 'pm25', name: 'PM₂.₅', values: [0,35,75,115,150,250]},
          {id: 'pm10', name: 'PM₁₀', values: [0,50,150,250,350,420]},
          {id: 'so2', name: 'SO₂', values: [0,50,150,475,800,1600]},
          {id: 'no2', name: 'NO₂', values: [0,40,80,180,280,565]},
          {id: 'co', name: 'CO', values: [0,2,4,35,14,24]},
          {id: 'o3_8h', name: 'O₃_8h', values: [0,100,160,215,265,800]},
        ],
        typeList:[],
      }

    }
  },
  created() {
    this.searchForm.year = this.$moment().format('YYYY');
    this.changeYear();    
  },
  methods: {    
    getList(){
      this.loading = true;
      this.$request('get', '/chaqi_avg/city', this.searchForm, (data,msg) => {
        let res = data;
        let resList = [];
        for(let i = 1; i < 13; i++){
          let arr = res.filter(item => {
            let month = Number(item.update_time.split('-')[1]);
            return i == month;
          })
          if(arr.length > 0){
            resList.push(arr);
          }
        };
        this.list = resList;
        this.changeType('AQI');
        this.loading = false;
      });
    },
    changeYear(){
      this.searchForm.start = this.$moment(this.searchForm.year).startOf('year').format('YYYY-MM-DD');
      this.searchForm.end = this.$moment(this.searchForm.year).endOf('year').format('YYYY-MM-DD');
      this.getList();
    },
    changeType(val){
      this.legend.type = val;
      this.legend.typeList = JSON.parse(JSON.stringify(this.typeList));
      let i,list;
      this.legend.list.forEach((item,index) => {
        if(item.name == val){
          i = index;
          this.legend.index = index;
          this.legend.typeId = item.id;
          list = item.values;
        }
      });
      this.legend.typeList = this.legend.typeList.map((item, index) => {
        item.value = list[index];
        return item;
      });
      this.resestList();
    },
    getClass(day,index){
      let obj = this.list[index-1].find(item => item.update_time == day);
      if(obj){
        let type = this.typeList.find(item => item.name == obj.quality);
        if(type) {
          return {...obj, typeId: type.id};
        }else{
          return {typeId: 0};
        }        
      }else{
        return {typeId: 0}
      }      
    },
    getTips(day,index){
      let list = [
        {name: 'city', label: '地市', value: null},
        {name: 'primary_pollutant', label: '首页污染物', value: null},
        {name: 'quality', label: '空气质量', value: null},
        {name: 'aqi', label: 'AQI', value: null},
        {name: 'pm25', label: 'PM₂.₅', value: null},
        {name: 'pm10', label: 'PM₁₀', value: null},
        {name: 'so2', label: 'SO₂', value: null},
        {name: 'no2', label: 'NO₂', value: null},
        {name: 'co', label: 'CO', value: null},
        {name: 'o3_8h', label: 'O₃_8h', value: null},
      ];
      let obj = this.list[index-1].find(item => item.update_time == day);
      if(obj){
        for(let key in obj){
          list.forEach((item,index) => {
            if(item.name == key){
              list[index].value = obj[key];
            }
          })
        }
      }
      return list;
    },
    getTotal(name,index){
      let arr = this.list[index-1].filter(item => item.quality == name);
      return arr.length;
    },
    getQuality(val){
      let data = this.legend.list[this.legend.index].values;
      let name = '优';
      if(val <= data[1]){
        name = '优';
      }else if( val > data[1] && val <= data[2]){
        name = '良';
      }else if( val > data[2] && val <= data[3]){
        name = '轻度污染';
      }else if( val > data[3] && val <= data[4]){
        name = '中度污染';
      }else if( val > data[4] && val <= data[5]){
        name = '重度污染';
      }else if( val > data[5]){
        name = '严重污染';
      }
      return name;
    },
    resestList(){
      this.list = this.list.map(item => {
        let arr = item.map(sub => {
          sub.quality = this.getQuality(sub[this.legend.typeId]);
          return sub;
        })
        return arr;
      });
    },
    toggleSearch(){
      this.isSearch = !this.isSearch;
    }
  }
}
</script>